import styled from 'styled-components'


const Border=(Comp,borderWidth='0.01rem 0.01rem 0.01rem 0.01rem',borderColor='orange',borderRadius=0.2)=>{
  return styled(Comp) `
     position: relative;
  &::before {
    content: "";
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    /* background:$color; */
    width: 100%;
    border:solid;
    border-width:${()=>borderWidth};
    border-color: ${()=>borderColor};
    transform-origin:0 0;
    border-radius:${()=>borderRadius}rem;
    pointer-events: none;
    
    @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5){
      width:150%;
      height:150%;
      border-radius:${()=>borderRadius * 1.5 }rem;
      transform: scale(0.667);
    }
  
    @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2){
      width:200%;
      height:200%;
      border-radius:${()=>borderRadius * 2 }rem;
      transform: scale(0.5);
    }
  
    @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3){
      width:300%;
      height:300%;
      border-radius:${()=>borderRadius * 3 }rem;
      transform: scale(0.3333);
    }
  }
  
  `
}

export default Border;